import { Button } from "@mui/material";
import React from "react";
import "./writequstion.less";

const WriteQuetionMap: IQuestionTypeMap = {
  fill: "填空",
  code: "编程",
  qa: "问答",
};

interface WriteQsProps {
  data: IQuestionModel;
}

// 需要书写(填空)题型的组件
export default function WriteQuetion({ data }: WriteQsProps) {
  return (
    <div className="write">
      <div className="top flex">
        <span className="type">{WriteQuetionMap[data.questionType]}</span>
        <div className="title">{data.title}</div>
      </div>
      <div
        className="content"
        // 在react里面需要这样设置一个元素的内容
        dangerouslySetInnerHTML={{ __html: data.content }}
      ></div>
      <div className="user-answer">
        <textarea placeholder="请输入答案"></textarea>
      </div>
      <div className="answers">
        <Button variant="outlined">确定</Button>

        <div className="show-answer">
          <div className="result"></div>
          <div className="tip">参考答案</div>
          <div
            className="final"
            dangerouslySetInnerHTML={{ __html: data.answer }}
          ></div>
        </div>
      </div>
    </div>
  );
}
